<template>
    <div class="shouchangjia">
        <div class="scjtou-w">
            <div class="scjtou clearfix">
                <div class="scj-l clearfix">
                    <a class="scjlogo">
                        <img class="sc-logo" src="../assets/img/sc/scjlogo.png">
                    </a>
                    <a href="javascript:;" class="shoucang-w baobei1" @click="active1" :class="{active:show==1}">
                        <div class="shoucang">宝贝收藏</div>
                    </a>
                    <a href="javascript:;" class="shoucang-w baobei2" @click="active2" :class="{active:show==2}">   
                     <div class="shoucang">商铺收藏</div>
                    </a>
                </div>
                <div class="shoucang-nav">
                    <form class="form">
                        <input type="text" class="shoucang-text">
                        <button type="button" class="shoucang-bnt">搜索</button>
                    </form>
                </div>
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>
<script>
export default {
    data(){
        return{
            show:'',
        }
    },
    methods:{
        active1(){
            this.show=1;
            this.$router.push("/shoucang/bb")
        },
        active2(){
            this.show=2;
            this.$router.push("/shoucang/dp")
        },
    },
    created(){
        if(this.$route.path.substr(10)=="bb"){
            this.show=1
        }else if(this.$route.path.substr(10)=="dp"){
            this.show=2
        }
    }
}
</script>

<style scoped >
.shoucang-nav{
    margin-top:18px;
    float: right;
    width: 320px;
    height: 27px;
}
.form{
    width: 320px;
    height: 27px;
    position: relative;
}
.shoucang-text{
    padding-left: 10px;
    width: 100%;
    height: 100%;
}
.shoucang-bnt{
    cursor: pointer;
    right:0;
    top:1px;
    position: absolute;
    width: 50px;
    height: 25px;
    color: #666;
    background: #eee;
    border: none;
}
.active{
    background: #DE3B00;
}
.sc-logo{
    margin-bottom: 12px;
}
.scjlogo{
    line-height: 60px;
    text-align: center;
    float: left;
    cursor: pointer;
    height: 60px;
    width: 200px;
    display: block;
}
.shoucang-w:hover{
    color: #fff;
}
.shoucang-w{
    text-align: center;
    color: #fff;
    float: left;
    display: block;
    width: 114px;
    height: 60px;
}
.scj-l{
    line-height: 60px;
    height:60px;
    width: 428px;
    float: left;
}
.scjtou-w{
    width: 100%;
    background:#FF4400;
}
.scjtou{
    margin: 0 auto;
    width: 1230px;
    height: 60px;
}
/* /-----------------------------------/  */
.clearfix::before{
    clear: both;
    content: "";
    display: block;
}
*{
	box-sizing: border-box;
}
body,ul,li,p,h1,h2,h3,em{
	margin: 0;
	padding: 0;
}
li{
	list-style: none;
	font-family: "微软雅黑";
	font-size: 12px;
	color: #666;
}
.w1230{
	width: 1230px;
}
h1,h2,h3{
	font-weight: normal;
}
/* /------------------------------------/  */
</style>